// components/live-player/index.ts
import { pushLiveStream, stopStream } from '../../api/index';
import { getVideoContext, getCanvasNode } from "../../utils/util"
const playIcon = "../../assets/img/video-control/play.png"
const pauseIcon = "../../assets/img/video-control/pause.png"
const volume = "../../assets/img/video-control/volume.png"
const mute = "../../assets/img/video-control/mute.png"
const fullScreen = "../../assets/img/video-control/full-screen.png"
const exitScreen = "../../assets/img/video-control/exit-full-screen.png"
const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    width: {
      type: String,
      value: `${app.globalData.windowWidth}px`
    },
    height: {
      type: String,
      value: `${app.globalData.windowWidth * 9 / 16}px`
    },
    srcList: {
      type: Object,
      value: {
        flv: "https://signal.guojutech.net/xmgj-daying-media/live/ansSnbPXShnvrbwE00000000T000000Z00000000T000000Z.live.flv",
        // fmp4: "https://vdvr.guojutech.net:4443/live/ewOVPe3Kmm4y8XjY.live.mp4%3Ftoken%3D035c73f7-bb6b-4889-a715-d9eb2d1925cc",
        fmp4: "https://signal.guojutech.net/xmgj-daying-media/live/ansSnbPXShnvrbwE00000000T000000Z00000000T000000Z.live.mp4?token=035c73f7-bb6b-4889-a715-d9eb2d1925cc",
        hls: "https://signal.guojutech.net/xmgj-daying-media/live/ansSnbPXShnvrbwE00000000T000000Z00000000T000000Z/hls.m3u8"
      }
    },
    videoDetail: {
      type: Object,
      observer: 'playVideo'
    },
    id: {
      type: String,
      value:'video-ply'
    },
    isShowProgress: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    windowWidth: app.globalData.windowWidth,
    system: app.globalData.system,
    danmuList: [],
    src: "",
    isShowVideoShort: false,
    videoShortVal: "",
    videoStreamWidth: 0,
    videoStreamHeigth: 0,
    scale:1,
    isPlaying:true
  },
  pageLifetimes: {
    show() {
    },
  },
  lifetimes: {
    ready() {
      const videoCtx = wx.createVideoContext(`${this.data.id}`)
      console.log(videoCtx);


    }
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 组件的方法列表
   */
  methods: {
    binderror(err: any) {
      console.log('---err:', err);
    },
    playVideo() {
      if (!this.data.videoDetail.CamID && !this.data.videoDetail.Id) return
      pushLiveStream({
        CamID: this.data.videoDetail.CamID || this.data.videoDetail.Id,
        ELVName: this.data.videoDetail.ELVName ? this.data.videoDetail.ELVName : "",
        CameraOrigin: Number(this.data.videoDetail.CameraOrigin)
      }).then((res: any) => {
        if (res.Data != null && Object.values(res.Data).length > 0) {
          this.setData({
            // src: this.data.system.includes("iOS") ? res.Data.hls : res.Data.mp4
            src: res.Data.hls
          })
        } else {
          wx.showToast({
            title: '获取视频失败',
            icon: 'error',
            duration: 2000
          })
        }
      })
    },
    videoErrorCallback(err) {
      console.log(err);
      this.playVideo();
    },
    metadataLoaded(event) {
      const { width, height } = event.detail;
      this.setData({
        videoStreamWidth: width,
        videoStreamHeigth: height
      })
    },
    async videoShort() {
      const videoId = this.data.id ? this.data.id : "video-ply"
      const videoRes: any = await getVideoContext(videoId, this);
      const video = videoRes[0].context;
      const canvas: any = wx.createOffscreenCanvas({ type: '2d', width: 400, height: 240 });
      const ctx = canvas.getContext('2d');
      ctx.drawImage(video,  0, 0, 400, 240, 0, 0, 400, 240);
      const base64 = canvas.toDataURL('image/png');
      console.log(base64);
      this.setData({
        videoShortVal:base64,
        isShowVideoShort:true
      })
    },
    downloadFileVideo(url) {
      return new Promise((r, j) => {
        wx.downloadFile({
          url: url,
          success: r,
          fail: j
        })
      })
    },
    myGetVideoInfo(url) {
      return new Promise((r, j) => {
        wx.getVideoInfo({
          src: url,
          success: r,
          fail: j
        })
      })
    },
    onClose() {
      this.setData({
        isShowVideoShort: false
      })
    }
  },
  onScale(e){
    console.log(e.detail);
    
  }

})
export { }